 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="title">
            <div class="buttonAction" style="float: right">
                <p:panel styleClass="container_24 clearfix">
                    <p:button href="editarfichainscricao.xhtml?ficha=#{managerPesquisarFichaInscricao.ficha.id}" 
                              value="Editar" icon="ui-icon-pencil" styleClass="ui-priority-primary"/>
                </p:panel>
            </div>
            <br/>
            <h2><a href="#" class="back" onclick="history.go(-1)"/>Visualizar Ficha de Inscrição</h2>
        </ui:define>

        <ui:define name="body">

            <link rel='stylesheet prefetch' href='media/css/photoswipe.css'/>
            <link rel='stylesheet prefetch' href='media/css/default-skin.css'/>
            <link rel="stylesheet" href="media/css/style_photo.css" media="screen" type="text/css" />


            <h:form id="form" enctype="multipart/form-data">
                <p:panel styleClass="container_24 clearfix">

                    <p:messages id="messages" closable="true" showDetail="true" autoUpdate="true"/>

                    <p:panel id="dadosGeraisPanel" styleClass="container_24 clearfix">
                        <h2>Participante</h2>
                        <br/>

                        <p:outputLabel value="Tipo:" styleClass="grid_3" for="tipoParticipante"/>
                        <p:inputText id="tipoParticipante" styleClass="grid_9" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.tipoParticipante.nome}"/>

                        <div class="clear"/>

                        <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText"/>
                        <p:inputText id="nomeInputText" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.nome}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Fone:" styleClass="grid_3" for="fone"/>
                        <p:inputText id="fone" styleClass="grid_8" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.telefone}"/>

                        <p:outputLabel value="Celular:" styleClass="grid_3" for="celular"/>
                        <p:inputText id="celular" styleClass="grid_8" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.celular}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Email:" styleClass="grid_3" for="email"/>
                        <p:inputText id="email" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.email}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Logradouro:" styleClass="grid_3" for="endereco"/>
                        <p:inputText id="endereco" styleClass="grid_19" 
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.endereco.logradouro}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Número:" styleClass="grid_3" for="numero"/>
                        <p:inputText id="numero" styleClass="grid_5 omega" 
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.endereco.numero}"/>

                        <p:outputLabel value="Bairro:" styleClass="grid_3 alpha" for="bairro"/>
                        <p:inputText id="bairro" styleClass="grid_11 alpha" 
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.endereco.bairro}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Cidade:" styleClass="grid_3" for="cidade"/>
                        <p:inputText id="cidade" styleClass="grid_14 omega" 
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.endereco.cidade}"/>

                        <p:outputLabel value="UF:" styleClass="grid_3 alpha" for="uf"/>
                        <p:inputText id="uf" styleClass="grid_2 alpha" 
                                     value="#{managerPesquisarFichaInscricao.ficha.participante.endereco.uf}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Clube:" styleClass="grid_3" for="clube"/>
                        <p:inputText id="clube" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.clube.nome.concat(' - ').concat(managerPesquisarFichaInscricao.ficha.clube.estado.sigla)}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Nº do Associado em RI:" styleClass="grid_3 numeroAssociadoRI" for="numeroAssociado"/>
                        <p:inputText id="numeroAssociado" styleClass="grid_4" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.numeroAssociadoEmRI}"/>

                        <p:outputLabel value="Meio de Transporte:" styleClass="grid_6" for="meioTransporte"/>
                        <p:inputText id="meioTransporte" styleClass="grid_9 meioTransporteInputVisualizar" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.meioTransporte.nome}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Nome crachá:" styleClass="grid_3 nomeCracha" for="nomeCracha"/>
                        <p:inputText id="nomeCracha" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.nomeCracha}"/>
                        <div class="clear"/>
                        <br/>

                        <h2>Convidado</h2>
                        <br/>

                        <p:outputLabel value="Tipo:" styleClass="grid_3" for="tipoConvidado"/>
                        <p:inputText id="tipoConvidado" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.tipoConvidado.nome}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeConvidado"/>
                        <p:inputText id="nomeConvidado" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.convidado.nome}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Fone:" styleClass="grid_3" for="foneConvidado"/>
                        <p:inputText id="foneConvidado" styleClass="grid_8" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.convidado.telefone}"/>

                        <p:outputLabel value="Celular:" styleClass="grid_3" for="celularConvidado"/>
                        <p:inputText id="celularConvidado" styleClass="grid_8" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.convidado.celular}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Email:" styleClass="grid_3" for="emailConvidado"/>
                        <p:inputText id="emailConvidado" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.convidado.email}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Nome crachá:" styleClass="grid_3 nomeCracha" for="nomeCrachaConvidado"/>
                        <p:inputText id="nomeCrachaConvidado" styleClass="grid_19" readonly="true"
                                     value="#{managerPesquisarFichaInscricao.ficha.nomeCrachaConvidado}"/>
                        <div class="clear"/><br/>

                        <h2>Anexos</h2>

                        <p:panel id="documentoPanel" styleClass="container_24 clearfix withoutBorder">

                            <div class="my-simple-gallery" >
                                <ui:repeat  value="#{managerPesquisarFichaInscricao.ficha.anexos}" var="a">
                                    <figure itemprop="associatedMedia" class="grid_3">
                                        <a href="#{managerImagem.urlImagem(a)}" 
                                           itemprop="contentUrl" data-size="#{managerImagem.widthHeight(a)}">
                                            <img src="#{managerImagem.urlThumbnailImagem(a)}" 
                                                 itemprop="thumbnail" class="image"/>
                                        </a>
                                        <figcaption itemprop="caption description">#{a.nomeExibicao}</figcaption>
                                    </figure>
                                </ui:repeat>
                            </div>
                        </p:panel>

                        <h2>Observação</h2>
                        <br/>
                        <p:outputLabel value="Observação:" styleClass="grid_3 nomeCracha" for="obs"/>
                        <p:inputTextarea id="obs" styleClass="grid_19" readonly="true"
                                         value="#{managerPesquisarFichaInscricao.ficha.obs}"/>

                    </p:panel>
                    <br/>

                    <div class="buttonAction">
                        <p:button value="Voltar" icon="ui-icon-arrowreturnthick-1-w"
                                  href="pesquisarfichainscricao.xhtml" />
                    </div>
                </p:panel>
            </h:form>

            <div id="divGaleria" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

                <div class="pswp__bg"></div>

                <div class="pswp__scroll-wrap">

                    <div class="pswp__container">
                        <div class="pswp__item"></div>
                        <div class="pswp__item"></div>
                        <div class="pswp__item"></div>
                    </div>

                    <div class="pswp__ui pswp__ui--hidden">

                        <div class="pswp__top-bar">

                            <div class="pswp__counter"></div>

                            <button class="pswp__button pswp__button--close" title="Fechar (Esc)"></button>
                            <button class="pswp__button pswp__button--fs" title="Tela Cheia"></button>
                            <button class="pswp__button pswp__button--zoom" title="Zoom +/-"></button>

                            <div class="pswp__preloader">
                                <div class="pswp__preloader__icn">
                                    <div class="pswp__preloader__cut">
                                        <div class="pswp__preloader__donut"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                            <div class="pswp__share-tooltip"></div> 
                        </div>



                        <button class="pswp__button pswp__button--arrow--left" title="Anterior (seta esquerda)">
                        </button>

                        <button class="pswp__button pswp__button--arrow--right" title="Próximo (seta direita)">
                        </button>

                        <div class="pswp__caption">
                            <div class="pswp__caption__center"></div>
                        </div>

                    </div>

                </div>

            </div>


            <script src='media/js/photoswipe.min.js'></script>
            <script src='media/js/photoswipe-ui-default.min.js'></script>

            <script src="media/js/index.js"></script>

            <script>
                function edit() {
                    var pid = $('#dlgVisuForm\\:pid').val(window.parseItemIndexFromURL().pid);
                    editCommand();
                }
            </script>
        </ui:define>
    </ui:composition>
</html>



